// 声明变量记录收藏状态
var flag = false
// 给心形的图片绑定点击事件
heart.onclick = function() {
	// 如果收藏了，取消收藏，是否没有收藏可以收藏
	if(flag) {
		// 取消收藏 
		// 改变图片路径
		this.src = 'img/heart.svg'
		// 状态发生变化
		flag = false
	} else {
		// 收藏
		// 改变当前图片的路径
		this.src = 'img/heart-active.svg'
		// 状态
		flag = true
	}
}

// 准备一组音乐数据(后期从后端获取)
// 每一首音乐数据（编号、标题、歌手、封面图片、对应的mp3文件路径）
var pool = [
	{mid: 100, title: '御剑江湖', author: '骆集益', imgUrl: 'img/0-ShuShan.jpg', audioUrl: 'music/0-lanting.mp3'},
	{mid: 101, title: '说好的幸福呢', author: '周杰伦', imgUrl: 'img/1-JiShi.jpg', audioUrl: 'music/1-YuManTang-LuoJiYi.mp3'},
	{mid: 102, title: '开往早晨的午夜', author: '张碧晨', imgUrl: 'img/2-XueShan.jpg', audioUrl: 'music/2-HuiMengYouXian-LuoJiYi.mp3'},
	{mid: 103, title: '可惜没如果', author: '林俊杰', imgUrl: 'img/3-QiuMo.jpg', audioUrl: 'music/3-CangLangJianFu-LuoJiYi.mp3'},
	{mid: 104, title: '喜欢你', author: '邓紫棋', imgUrl: 'img/4-YingDu.jpg', audioUrl: 'music/4-ShenWeiQianChong-ZengZhiHao.mp3'},
	{mid: 105, title: '孤勇者', author: '陈奕迅', imgUrl: 'img/5-DaMo.jpg', audioUrl: 'music/5-KunLunDao-ZhouZhiHua.mp3'},
]

// 获取一条数据
// console.log(pool[2])
// // 获取一条数据中的值
// console.log(pool[2].title)
// console.log(pool[2].author)
// console.log(pool[2].imgUrl)
// console.log(pool[2].audioUrl)

// 声明变量保存默认要播放的音乐
var current = 0
// 创建函数一个函数，用于控制音乐的播放
var playMusic = function() {
	// 获取一首音乐
	var m = pool[current]
	console.log(m)
	// 把这首音乐数据的值渲染到页面
	musicTitle.innerHTML = m.title
	musicAuthor.innerHTML = m.author
	// 改变图片路径
	musicUrl.src = m.imgUrl
	// 图片播放动画，通过CSS属性animation-play-state
	// paused  暂停    running  播放
	musicUrl.style.animationPlayState = 'running'
	// 音乐控制：把音频文件路径渲染
	music.src = m.audioUrl
	// 播放
	music.play()
	// 将按钮的图片改为暂停状态
	btnPlay.src = 'img/pause.png'
}

// 给播放按钮绑定点击事件
btnPlay.onclick = function() {
	// 如果处于暂停状态，点击是播放
	if(music.paused) {
		// 调用音乐播放的函数
		playMusic()
	} else {
		// 否则说明是播放状态，点击可以暂停
		// 音乐暂停
		music.pause()
		// 动画暂停
		musicUrl.style.animationPlayState = 'paused'
		// 播放按钮的图片变为播放
		btnPlay.src = 'img/play.png'
	}
}

// 网页打开没有播放
// console.log(music.paused)

// 给下一首按钮绑定点击事件
btnNext.onclick = function() {
	// 让记录的当前播放的音乐编号加1
	current++
	console.log(current)
	// 如果超过了最后一首，回到第一首
	if(current > 5) {
		current = 0
	}
	// 执行播放
	playMusic()
}
// 上一首播放
btnPrev.onclick = function() {
	// 当前播放的音乐的编号减
	current--
	// 如果小于0，回头最后一首
	if(current < 0) {
		current = 5
	}
	// 播放
	playMusic()
}

// 播放进度更新，当音乐播放的同时，进度也需要发送变化
// 监听播放进度
music.ontimeupdate = function() {
	// 获取总时长
	// console.log(music.duration)
	
	// 获取已播放时间  129
	// console.log(music.currentTime)
	// 计算出已播放的分钟部分，再转换为整型
	var minute = parseInt(music.currentTime/60) 
	// 秒钟部分
	var second = parseInt(music.currentTime%60)
	// 如果小于10，在数字之前连接0
	if(second < 10) {
		second = '0' + second
	}
	// console.log(minute + ':' + second)
	// 将计算好的已播放进行渲染
	cTime.innerHTML = minute + ':' + second
	
	// 计算出总时长分钟部分
	var dMinute = parseInt(music.duration/60) 
	// 计算出总时长秒钟部分
	var dSecond = parseInt(music.duration%60)
	// 如果小于0，在前拼接0
	if(dSecond < 10) {
		dSecond = '0' + dSecond
	}
	// 判断是否为NaN
	if(isNaN(music.duration)) {
		// alert('出现了NaN')
		return  //结束不需要渲染
	}
	// 渲染
	dTime.innerHTML = dMinute + ':' + dSecond
	// 计算出播放的百分比
	var percent = music.currentTime / music.duration * 100 + '%'
	// console.log(percent)
	// 将百分比赋给进度条的CSS属性
	progress.style.width = percent 
	// 将百分比赋给小球CSS属性
	desc.style.left = percent
}


// 监听是否播放结束
music.onpause = function() {
	// alert('结束了')
	// 动画暂停
	musicUrl.style.animationPlayState = 'paused'
	// 播放按钮图片变为可播放状态
	btnPlay.src = 'img/play.png'
}

// 给后退按钮绑定点击
goBack.onclick = function() {
	history.go(-1)
}